<template>
	<div class="app">
		<el-row :gutter="22" style="margin-bottom: 20px">
			<el-col :span="16">
				<div v-for="(item,index) in leftComponents">
					<component :is="item" @dealttotalshow='dealttotalshow' :itemIndex="index" @upClick="upClick" @downClick="downClick"></component>
				</div>
			</el-col>
			<el-col :span="8">
				<div v-for="(item,index) in rigthComponents">
					<component :is="item" :itemIndex="index" @upClick="upRightClick" @downClick="downRightClick"></component>
				</div>
			</el-col>
		</el-row>
		<remind v-if="count==0&&reimdshow==true" :dealttotal='dealttotal' @dowingshow='dowingshow'></remind>
	</div>
</template>

<script>
    import { mapState,mapGetters} from "vuex";
	import remind from '@/components/remind/index'
	import task from './components/task'
	import myProject from "./components/myProject";
	import storehouse from "./components/storehouse";
	import overall from './components/overall.vue'
	import pending from './components/pending.vue'
	import permissionFunc from "@/utils/permission";
	export default {
		computed: {
    	...mapGetters([
    		'count'
    	 ])
       },
		data() {
			return {
				reimdshow:true,
				leftComponents: [],
				rigthComponents: [],
				dealttotal:"",
				timers:null
			}
		},
		components: {
			task,
			myProject,
			storehouse,
			overall,
			pending,
			remind
		},
		created() {
			if (localStorage.getItem('leftComponents')) {
				this.leftComponents = JSON.parse(localStorage.getItem('leftComponents'))
			} else {
				var data = ['pending','task', 'overall']
				this.leftComponents = data
			}
			if (localStorage.getItem('rigthComponents')) {
				this.rigthComponents = JSON.parse(localStorage.getItem('rigthComponents'))
			} else {
				var data = ['myProject', 'storehouse']
				if(!this.permissionQuery()){data.pop()}
				this.rigthComponents = data
			}
		},
		methods: {
			dealttotalshow(data){
				console.log('555555555555555555666666666666666666666666');
				console.log(data);
				this.dealttotal=data
			},
			dowingshow(){
				this.reimdshow=false
			},
			permissionQuery() {
               return permissionFunc.inserted(["app:git"]);
            },
			upClick(itemIndex) {
				let newArr = this.swapItems(this.leftComponents, itemIndex, itemIndex - 1)
				this.leftComponents = newArr
				localStorage.setItem('leftComponents', JSON.stringify(this.leftComponents));
			},
			downClick(itemIndex) {
				let newArr = this.swapItems(this.leftComponents, itemIndex, itemIndex + 1)
				this.leftComponents = newArr
				localStorage.setItem('leftComponents', JSON.stringify(this.leftComponents));
			},
			swapItems(arr, index1, index2) {
				arr[index1] = arr.splice(index2, 1, arr[index1])[0];
				return arr;
			},
			upRightClick(itemIndex){
				let newArr = this.swapItems(this.rigthComponents, itemIndex, itemIndex - 1)
				this.rigthComponents = newArr
				localStorage.setItem('rigthComponents', JSON.stringify(this.rigthComponents));
			},
			downRightClick(itemIndex){
				let newArr = this.swapItems(this.rigthComponents, itemIndex, itemIndex + 1)
				this.rigthComponents = newArr
				localStorage.setItem('rigthComponents', JSON.stringify(this.rigthComponents));
			}
		}
	}
</script>

<style scoped>
	.app {
		padding: 36px;
		box-sizing: border-box;
	}
</style>
